<template>
	<view class="container">
		<CustomNavbar title="API测试" />
		
		<view class="content">
			<!-- 测试结果显示 -->
			<view class="test-section">
				<view class="section-title">测试结果</view>
				<view class="test-results">
					<text class="result-text">{{ testResults }}</text>
				</view>
			</view>
			
			<!-- 用户信息测试 -->
			<view class="test-section">
				<view class="section-title">用户信息API测试</view>
				<button class="test-btn" @click="testGetProfile">获取用户信息</button>
				<button class="test-btn" @click="testUpdateProfile">更新用户信息</button>
			</view>
			
			<!-- 文件上传测试 -->
			<view class="test-section">
				<view class="section-title">文件上传API测试</view>
				<button class="test-btn" @click="testUploadAvatar">测试头像上传</button>
			</view>
			
			<!-- 数据库连接测试 -->
			<view class="test-section">
				<view class="section-title">后端服务测试</view>
				<button class="test-btn" @click="testBackendConnection">测试后端连接</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { userAPI, fileAPI } from '@/utils/api.js'
	import CustomNavbar from '@/components/CustomNavbar.vue'
	
	export default {
		components: {
			CustomNavbar
		},
		data() {
			return {
				testResults: '点击按钮开始测试...'
			}
		},
		methods: {
			// 测试获取用户信息
			async testGetProfile() {
				this.testResults = '正在测试获取用户信息...'
				try {
					const userProfile = await userAPI.getProfile()
					this.testResults = `✅ 获取用户信息成功:\n${JSON.stringify(userProfile, null, 2)}`
				} catch (error) {
					this.testResults = `❌ 获取用户信息失败:\n${error.message}`
				}
			},
			
			// 测试更新用户信息
			async testUpdateProfile() {
				this.testResults = '正在测试更新用户信息...'
				try {
					const testData = {
						name: '测试用户',
						desc: '这是一个测试更新',
						avatarText: '🐿️',
						avatarUrl: '',
						tags: ['测试标签', 'API测试'],
						email: 'test@example.com',
						phone: '13800138000'
					}
					
					const result = await userAPI.updateDetailedProfile(testData)
					this.testResults = `✅ 更新用户信息成功:\n${JSON.stringify(result, null, 2)}`
				} catch (error) {
					this.testResults = `❌ 更新用户信息失败:\n${error.message}`
				}
			},
			
			// 测试头像上传
			async testUploadAvatar() {
				this.testResults = '正在测试头像上传...'
				try {
					const res = await new Promise((resolve, reject) => {
						uni.chooseImage({
							count: 1,
							sizeType: ['compressed'],
							sourceType: ['album'],
							success: resolve,
							fail: reject
						})
					})
					
					if (res.tempFilePaths && res.tempFilePaths.length > 0) {
						const filePath = res.tempFilePaths[0]
						const uploadResult = await fileAPI.uploadAvatar(filePath)
						this.testResults = `✅ 头像上传成功:\n${JSON.stringify(uploadResult, null, 2)}`
					} else {
						this.testResults = '❌ 未选择文件'
					}
				} catch (error) {
					this.testResults = `❌ 头像上传失败:\n${error.message}`
				}
			},
			
			// 测试后端连接
			async testBackendConnection() {
				this.testResults = '正在测试后端连接...'
				try {
					// 使用一个简单的请求来测试连接
					const response = await uni.request({
						url: 'http://localhost:8080/api/users/profile',
						method: 'GET',
						header: {
							'Authorization': `Bearer ${uni.getStorageSync('token')}`
						}
					})
					
					if (response.statusCode === 200) {
						this.testResults = `✅ 后端连接成功:\n状态码: ${response.statusCode}\n响应: ${JSON.stringify(response.data, null, 2)}`
					} else {
						this.testResults = `⚠️ 后端响应异常:\n状态码: ${response.statusCode}\n响应: ${JSON.stringify(response.data, null, 2)}`
					}
				} catch (error) {
					this.testResults = `❌ 后端连接失败:\n${error.message || JSON.stringify(error)}`
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../uni.scss';
	
	.container {
		background: $cute-gradient-bg;
		min-height: 100vh;
	}
	
	.content {
		padding: 30rpx;
		margin-top: calc(var(--status-bar-height) + 88rpx);
	}
	
	.test-section {
		margin-bottom: 40rpx;
		background: $cute-bg-secondary;
		border-radius: $cute-border-radius;
		padding: 30rpx;
		box-shadow: $cute-card-shadow;
		border: 2rpx solid $cute-border;
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: 600;
		color: $cute-text-primary;
		margin-bottom: 20rpx;
		text-align: center;
	}
	
	.test-results {
		background: #f5f5f5;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		min-height: 200rpx;
		border: 2rpx solid $cute-border;
	}
	
	.result-text {
		font-size: 24rpx;
		color: $cute-text-primary;
		line-height: 1.5;
		white-space: pre-wrap;
		word-break: break-all;
	}
	
	.test-btn {
		width: 100%;
		height: 80rpx;
		background: $cute-gradient-primary;
		color: white;
		border: none;
		border-radius: $cute-border-radius;
		font-size: 28rpx;
		font-weight: 500;
		margin-bottom: 15rpx;
		box-shadow: $cute-button-shadow;
		transition: all 0.3s;
		
		&:hover {
			transform: translateY(-2rpx);
			box-shadow: 0 10rpx 30rpx rgba(144, 238, 144, 0.3);
		}
		
		&:active {
			transform: translateY(0) scale(0.98);
		}
		
		&:last-child {
			margin-bottom: 0;
		}
	}
</style>
